/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-11-04 15:58:25
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-11-04 16:49:22
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\views\login\particale2.ts
 * @Description: 
 */
export default function initPaticleBg() {
    const windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    const canvas = document.getElementById('canvas') as HTMLCanvasElement;

    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
    canvas.width = windowWidth
    canvas.height = windowHeight
    
    const width = window.innerWidth * devicePixelRatio
    const height = window.innerHeight * devicePixelRatio
    const fontSize = 20 * devicePixelRatio

    //column
    const columnWidth = fontSize
    const columnCount = Math.floor(width / columnWidth)

    // text
    const nextText = new Array(columnCount).fill(0)

    const startDraw = () => {
        ctx!.fillStyle = 'rgba(16, 31, 48, 0.1)'
        ctx!.fillRect(0, 0, width, height)
        for (let index = 0; index < columnCount; index++) {
            ctx!.fillStyle = getRandomColor()
            const char = getRandomText()
            ctx!.font = `${fontSize}px "Roboto Mono"`
            const x = index * columnWidth
            const s = nextText[index]
            const y = (s + 1) * fontSize
            
            ctx!.fillText(char, x, y)
            if (y > height && Math.random() > 0.99) {
                nextText[index] = 0
            } else {
                nextText[index]++
            }

        }
    }

    const getRandomColor = () => {
        const fontColors = [
            '#33B5E5', '#0099CC', '#AA66CC', '#9933CC', '#99CC00', '#669900', '#FFBB33', '#FF8800', '#FF4444', '#CC0000',
        ]
        return fontColors[Math.floor(Math.random() * fontColors.length)]
    }

    const getRandomText = () => {
        const str = '0123456789 abcdefgh'
        return str[Math.floor(Math.random() * str.length)]
    }

    const animation = () => {
        startDraw()
        requestAnimationFrame(animation)
    }

    animation()
}